﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

    <link href="/static/js/vue-treeselect/vue-treeselect.css" rel="stylesheet" />
    <script src="/static/js/vue-treeselect/vue-treeselect.js"></script>
</head>

<body>

    
<div id="app" v-cloak>   
        <el-button type="primary" @click="save()">保存</el-button>
        <el-table  ref="table" @selection-change="handleSelectionChange" :data="menuList" border row-style="height:10px"
            row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width: 100%； height100%">
            <el-table-column type="selection" align="center" width="55">
            </el-table-column>
            <el-table-column type="index" :label="SysMenu.No" :index="indexMethod" width="50"
                show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="name" :label="SysMenu.Name" show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="code" :label="SysMenu.Code" width="200" show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="type" :label="SysMenu.Type" width="50" show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{scope.row.type==0?'菜单':'功能'}}
                </template>
            </el-table-column>
            <el-table-column prop="type" label="反选" width="50" >
                <template slot-scope="scope">
                    <el-button  v-show="scope.row.children" size="mini" @click="rowBtnClick(scope.row)"><i class="el-icon-refresh"></i></el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                menuList: [],//功能数据
                saveModel: {//viewModel
                    roleId: null,
                    menuIds: []
                },
                multipleSelection: []
            },
            mounted: function () {
                this.saveModel.roleId = getUrlParam("id");
                this.getData();
            },
            updated: function () {
                this.SetDefaul();
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                //表格序号连续化
                indexMethod: function (index) {
                    return index + 1;
                },
                getData: function () {
                    var mythis = this;
                    //获取权限信息
                    myAjax("post", null, '/api/Menu/GetList', null, function (response) {
                        var data = MenuHelper(response.data, "");
                        mythis.menuList = data;
                    }, false);

                },
                SetDefaul: function () {
                    //获取当前角色已有权限信息
                    var mythis = this;
                    myAjax("get", null, '/api/role/GetMenuListByRole?roleId=' + this.saveModel.roleId, null, function (response) {
                        mythis.saveModel.menuIds = response.data;
                        var seleObjList = [];
                        mythis.saveModel.menuIds.forEach(function(menuid){
                            DepthFor(mythis.menuList, function (item) {
                                if (item.id == menuid) {
                                    seleObjList.push(item);

                                }
                            })
                        });
                        mythis.$refs.table.clearSelection();
                        if (seleObjList) {
                            seleObjList.forEach(function(row) {
                                mythis.$refs.table.toggleRowSelection(row);
                            });
                        }
                    }, false);
                },
                //更新角色与权限关系
                save: function () {
                    //更新角色与权限关系
                    myAjax("post", null, '/api/role/UpdateRoleMenu', this.saveModel, function (response) {
                        if (isSuccess(response)) {
                            showMessage("操作成功", "success")
                            parent.app.SysRoleMenuIsShow=false;
                            
                        } else {
                            showMessage(response.message, "error")
                        }
                    }, false);
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                    var seleObjList = [];
                    this.multipleSelection.forEach(row => {
                        seleObjList.push(row.id);
                    });
                    this.saveModel.menuIds = seleObjList;
                },
                //点击反选按钮
                rowBtnClick(row) {
                    var id = row.id;
                    var mythis = this;
                    DepthFor(this.menuList, function (itemRow) {
                        if (itemRow.parentId == id || itemRow.id == id)
                            mythis.$refs.table.toggleRowSelection(itemRow);
                    });
                }

            }
        });
        //数据序列化(tabletree)
        function MenuHelper(list, pid) {
            var result = [];
            list.forEach(function (v, i) {
                if (v.parentId == pid) {
                    var obj = {};
                    for (var key in v) {
                        obj[key] = v[key];
                    }
                    var nextObj = MenuHelper(list, v.id);
                    if (nextObj.length > 0) {
                        obj.children = nextObj;
                    }
                }
                if (obj)
                    result.push(obj)
            })
            return result;
        }
        //对扁平化后的数据深度遍历

        function DepthFor(list, itemFucntion) {
            list.forEach(function (item, i) {
                if (itemFucntion)
                    itemFucntion(item);
                if (item.children && item.children.length > 0) {
                    DepthFor(item.children, itemFucntion);
                }
            });
        }
    </script>
</body>

</html>